<template>
  <view class="test-mock-page">
    <view class="header">
      <text class="title">Mock 数据测试</text>
    </view>
    
    <view class="content">
      <!-- Mock 状态 -->
      <view class="section">
        <view class="section-title">Mock 状态</view>
        <view class="status-item">
          <text class="label">Mock 启用状态:</text>
          <text :class="['status', mockEnabled ? 'enabled' : 'disabled']">
            {{ mockEnabled ? '已启用' : '已禁用' }}
          </text>
        </view>
      </view>
      
      <!-- 测试按钮 -->
      <view class="section">
        <view class="section-title">API 测试</view>
        <view class="test-buttons">
          <button 
            class="test-btn" 
            @click="testUserInfo" 
            :loading="loading.userInfo"
          >
            测试用户信息
          </button>
          
          <button 
            class="test-btn" 
            @click="testHabitsList" 
            :loading="loading.habits"
          >
            测试习惯列表
          </button>
          
          <button 
            class="test-btn" 
            @click="testFinanceAccounts" 
            :loading="loading.finance"
          >
            测试财务账户
          </button>
          
          <button 
            class="test-btn" 
            @click="testTodosList" 
            :loading="loading.todos"
          >
            测试待办事项
          </button>
        </view>
      </view>
      
      <!-- 测试结果 -->
      <view class="section" v-if="testResults.length > 0">
        <view class="section-title">测试结果</view>
        <view class="results">
          <view 
            v-for="(result, index) in testResults" 
            :key="index" 
            :class="['result-item', result.success ? 'success' : 'error']"
          >
            <view class="result-header">
              <text class="api-name">{{ result.api }}</text>
              <text :class="['result-status', result.success ? 'success' : 'error']">
                {{ result.success ? '成功' : '失败' }}
              </text>
            </view>
            <view class="result-content">
              <text class="result-text">{{ result.message }}</text>
            </view>
            <view v-if="result.data" class="result-data">
              <text class="data-label">返回数据:</text>
              <text class="data-content">{{ JSON.stringify(result.data, null, 2) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import config from '@/config'

// 响应式数据
const mockEnabled = ref(false)
const loading = ref({
  userInfo: false,
  habits: false,
  finance: false,
  todos: false
})
const testResults = ref([])

// 初始化
onMounted(() => {
  mockEnabled.value = config.api.useMock
})

// 添加测试结果
const addTestResult = (api, success, message, data = null) => {
  testResults.value.unshift({
    api,
    success,
    message,
    data,
    timestamp: new Date().toLocaleTimeString()
  })
  
  // 限制结果数量
  if (testResults.value.length > 10) {
    testResults.value = testResults.value.slice(0, 10)
  }
}

// 测试用户信息
const testUserInfo = async () => {
  loading.value.userInfo = true
  try {
    const response = await request.get('/user/info')
    addTestResult(
      'GET /user/info',
      true,
      '获取用户信息成功',
      response.data
    )
  } catch (error) {
    addTestResult(
      'GET /user/info',
      false,
      error.message || '获取用户信息失败'
    )
  } finally {
    loading.value.userInfo = false
  }
}

// 测试习惯列表
const testHabitsList = async () => {
  loading.value.habits = true
  try {
    const response = await request.get('/habits', {
      page: 1,
      pageSize: 5
    })
    addTestResult(
      'GET /habits',
      true,
      `获取习惯列表成功，共 ${response.data.data?.length || 0} 条记录`,
      response.data
    )
  } catch (error) {
    addTestResult(
      'GET /habits',
      false,
      error.message || '获取习惯列表失败'
    )
  } finally {
    loading.value.habits = false
  }
}

// 测试财务账户
const testFinanceAccounts = async () => {
  loading.value.finance = true
  try {
    const response = await request.get('/finance/accounts')
    addTestResult(
      'GET /finance/accounts',
      true,
      `获取财务账户成功，共 ${response.data.data?.length || 0} 个账户`,
      response.data
    )
  } catch (error) {
    addTestResult(
      'GET /finance/accounts',
      false,
      error.message || '获取财务账户失败'
    )
  } finally {
    loading.value.finance = false
  }
}

// 测试待办事项
const testTodosList = async () => {
  loading.value.todos = true
  try {
    const response = await request.get('/todos', {
      page: 1,
      pageSize: 5
    })
    addTestResult(
      'GET /todos',
      true,
      `获取待办事项成功，共 ${response.data.data?.length || 0} 条记录`,
      response.data
    )
  } catch (error) {
    addTestResult(
      'GET /todos',
      false,
      error.message || '获取待办事项失败'
    )
  } finally {
    loading.value.todos = false
  }
}
</script>

<style lang="scss" scoped>
.test-mock-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60rpx 40rpx 40rpx;
    color: white;
    
    .title {
      font-size: 48rpx;
      font-weight: bold;
    }
  }
  
  .content {
    padding: 40rpx;
  }
  
  .section {
    background: white;
    border-radius: 16rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    
    .section-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
    }
  }
  
  .status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .label {
      font-size: 32rpx;
      color: #666;
    }
    
    .status {
      font-size: 32rpx;
      font-weight: bold;
      padding: 8rpx 20rpx;
      border-radius: 20rpx;
      
      &.enabled {
        color: #52c41a;
        background: #f6ffed;
        border: 2rpx solid #b7eb8f;
      }
      
      &.disabled {
        color: #ff4d4f;
        background: #fff2f0;
        border: 2rpx solid #ffccc7;
      }
    }
  }
  
  .test-buttons {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .test-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12rpx;
      padding: 24rpx;
      font-size: 32rpx;
      font-weight: bold;
      
      &:active {
        opacity: 0.8;
      }
    }
  }
  
  .results {
    .result-item {
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      &.success {
        background: #f6ffed;
        border: 2rpx solid #b7eb8f;
      }
      
      &.error {
        background: #fff2f0;
        border: 2rpx solid #ffccc7;
      }
      
      .result-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .api-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }
        
        .result-status {
          font-size: 24rpx;
          font-weight: bold;
          padding: 4rpx 12rpx;
          border-radius: 12rpx;
          
          &.success {
            color: #52c41a;
            background: #f6ffed;
          }
          
          &.error {
            color: #ff4d4f;
            background: #fff2f0;
          }
        }
      }
      
      .result-content {
        margin-bottom: 20rpx;
        
        .result-text {
          font-size: 28rpx;
          color: #666;
        }
      }
      
      .result-data {
        .data-label {
          font-size: 24rpx;
          color: #999;
          display: block;
          margin-bottom: 10rpx;
        }
        
        .data-content {
          font-size: 24rpx;
          color: #666;
          background: #f8f9fa;
          padding: 20rpx;
          border-radius: 8rpx;
          white-space: pre-wrap;
          word-break: break-all;
        }
      }
    }
  }
}
</style>